<template>
  <div class="index_box">
    <div class="shop_banner_n">

      <categroy />
      <!-- 轮播开始 -->
      <div class="swiper-moto">
        <el-carousel>
          <el-carousel-item v-for="(item, index) in banners" :key="index">
            <el-image :src="item.slideshowFile" style="height: 400px;width: 100%;" fit="cover" @click="goPageFn(item)" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="product_count">
      <div class="product-list-container">
        <div class="product-top-wrap">
          <div class="product-level-name">
            好物<span class="level-name-blur">推荐</span>
          </div>
        </div>
        <productList :product-list="productList" />
      </div>
    </div>
  </div>
</template>
<script>
import productList from '@/components/productList'
import categroy from '@/components/categroy'
import _validate from '@/framework/commonJs/wptx_validate'
import { _recommendList, _getSlideshowByList } from '@/api/homePage'
export default {
  name: 'Index',
  components: {
    productList,
    categroy
  },
  data() {
    return {
      banners: [],

      productList: [],
      pageData: {
        pageNo: 1,
        pageSize: 50,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      }
    }
  },

  created() {
    if (this.$store.getters.catoryTressData.length == 0) {
      this.$store.dispatch('getcCategroyList', this.getListCallback)
    }
  },

  mounted() {
    this.recommendListFn()
    this.getSlideshowByList()
  },
  methods: {
    getListCallback(res) {
      this.categroyList = res.data
    },
    // 商品列表
    async recommendListFn() {
      const params = {
        storeId: 1, // 门店id
        isRecommend: 1 // 、 "是否推荐,（0:否; 1:是;）",
      }
      const { result } = await _recommendList(params)
      if (_validate.checkEmpty(result)) {
        _validate.openTip(this, '获取超时，请稍后重试', 'warning')
      } else {
        this.productList = result.result
      }
    },
    // 轮播图
    async getSlideshowByList() {
      const params = {
        status: 2 // 发布
      }
      const { result } = await _getSlideshowByList(params)
      if (_validate.checkEmpty(result)) {
        _validate.openTip(this, '获取超时，请稍后重试', 'warning')
      } else {
        this.banners = result
      }
    },
    // 轮播图跳转
    goPageFn(item) {
      if (item.slideshowType == 1) {
        const jumpurl = item.content.split(',')[0]
        console.log(jumpurl)
        const newPage = this.$router.resolve({
          path: '/homePage/productDetail',
          query: {
            id: jumpurl
          }
        })
        window.open(newPage.href, '_blank')
      }
      if (item.slideshowType == 2) {
        window.open(item.content, '_blank')
      }
    }
  }

}

</script>
<style scoped lang="scss">
.index_box {
  width: 1200px;
  margin: 0 auto;

  .shop_banner_n {
    display: flex;
    z-index: 10;
    justify-content: space-between;
    overflow: hidden;
    margin: 0 auto;
    height: 400px;

    .swiper-moto {
      height: 400px;
      flex: 8;
      margin-left: 24px;
      border-radius: 12px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .product_count {
    margin: 20px 0;

    .product-list-container {
      margin-bottom: 20px;

      .product-top-wrap {
        height: 61px;
        line-height: 61px;
        background: #FFF;
        mix-blend-mode: multiply;
        box-shadow: 0 -1px 0 0 #F0F0F0 inset;
        margin: 24px 0 32px 0;

        .product-level-name {

          font-size: 24px;
          font-style: normal;
          font-weight: 500;

          .level-name-blur {
            color: #1B74E0;

          }
        }

      }
    }
  }
}

>>>.el-carousel__container {
  height: 400px !important;
}
</style>

